<template>
  <div class="login">
    <h2>您好，请注册</h2>
    <van-form @submit="onSubmit" class="txtbox">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="password1"
        type="password"
        name="密码"
        label="确认密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请确认密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="disabled"
          @click="goRegi"
          >注册</van-button
        >
      </div>
    </van-form>

    <div class="box">
      <div>手机号登录</div>
      <div>忘记密码</div>
    </div>

    <div class="p">
      <div>
        <van-checkbox
          v-model="checked"
          icon-size="15"
          class="icon"
          @click="myclick"
        ></van-checkbox>
      </div>
      <section>已阅读并同意《用户服务协议》、《隐私政策》</section>
    </div>
  </div>
</template>

<script>
import { fun_reg } from "@/api/index";
import Vue from "vue";
import { Form, Toast } from "vant";
import { Field } from "vant";
import { Button } from "vant";
import { Checkbox, CheckboxGroup } from "vant";


Vue.use(Toast);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Button);
Vue.use(Form);
Vue.use(Field);
export default {
  data() {
    return {
      username: "",
      password: "",
      password1: "",
      checked: false,
      disabled: true,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    goRegi() {
      if (this.password == this.password1) {
        fun_reg(this.username, this.password).then((res) => {
          console.log(res);
            if(res.status=="201"){
              Toast('注册成功')
              this.$router.push('/login')
            }else{
              Toast('注册失败')
            }
        });
      }else{
        Toast('两次输入密码不一致')
      }
    },
    myclick(){
        if (this.checked == true) {
        this.disabled = !this.disabled;
      } else {
         this.disabled=true
      }
    }
  },
};
</script>

<style scoped lang="scss">
.login {
  padding: 5.5556rem 1.1111rem;
  h2 {
    margin-top: 1.1111rem;
    margin-left: 0.6667rem;
  }
  .txtbox {
    margin-top: 1.6667rem;
  }
  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      font-size: 0.7778rem;
      color: rgb(8, 136, 216);
      padding: 0.5556rem;
    }
  }
  .p {
    font-size: 0.7222rem;
    margin-top: 16.6667rem;
    display: flex;
    .icon {
      margin-top: 0.1667rem;
    }
    section {
      margin-left: 0.2778rem;
    }
  }
}
</style>